import { useWantStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { ChangeEventHandler, KeyboardEventHandler, useState } from "react";
import {
  Button,
  Col,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
  Input,
  Row,
} from "reactstrap";
import { useTo } from "taehui-ts/fe-utilities";

export default observer(() => {
  const { textInput, setTextInput, wantVariety, setWantVariety } =
    useWantStore();

  const [isWantVarietyOpened, setWantVarietyOpened] = useState(false);

  const t = useTranslations();

  const to = useTo();

  const onWant = () => {
    if (textInput) {
      to(`/want/${wantVariety}/${encodeURIComponent(textInput)}`);
    }
  };

  const onWantInput: ChangeEventHandler<HTMLInputElement> = ({
    target: { value },
  }) => {
    setTextInput(value);
  };

  const onInputLower: KeyboardEventHandler<HTMLInputElement> = ({ key }) => {
    if (key === "Enter") {
      onWant();
    }
  };

  const onCloseWantVariety = () => {
    setWantVarietyOpened(!isWantVarietyOpened);
  };

  const onInputWantVariety = (wantVariety: "essay" | "comment") => () => {
    setWantVariety(wantVariety);
  };

  return (
    <Row className="g-0">
      <Col className="m-1" xs="auto">
        <Dropdown isOpen={isWantVarietyOpened} toggle={onCloseWantVariety}>
          <DropdownToggle caret> {t(wantVariety)}</DropdownToggle>
          <DropdownMenu>
            <DropdownItem onClick={onInputWantVariety("essay")}>
              {t("essay")}
            </DropdownItem>
            <DropdownItem onClick={onInputWantVariety("comment")}>
              {t("comment")}
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Col>
      <Col className="m-1">
        <Input
          type="search"
          value={textInput}
          onChange={onWantInput}
          onKeyDown={onInputLower}
        />
      </Col>
      <Col className="m-1" xs="auto">
        <Button color="success" onClick={onWant}>
          {t("onWant")}
        </Button>
      </Col>
    </Row>
  );
});